import 'package:ceramics/model/ab_singleton.dart';
import 'package:ceramics/pages/main/video/ab_video_home_page.dart';
import 'package:ceramics/styles/ab_styles.dart';
import 'package:ceramics/util/ab_api.dart';
import 'package:ceramics/widgets/ab_image.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';

class ABFollowListPage extends StatefulWidget {
  const ABFollowListPage({super.key});

  @override
  State<ABFollowListPage> createState() => _ABFollowListPageState();
}

class _ABFollowListPageState extends State<ABFollowListPage> {
  
  @override
  void initState() {
    super.initState();
    _fetchFollowList();
  }
  
  _fetchFollowList() async {
    await api.followList(1000, 1);
    setState(() {});
  }
  
  @override
  Widget build(BuildContext context) {
    var flagDict = {
      'USA': '🇺🇸',
      'China': '🇨🇳',
      'Japan': '🇯🇵',
      'Korea': '🇰🇷',
      'Germany': '🇩🇪',
      'France': '🇫🇷',
      'Italy': '🇮🇹',
      'UK': '🇬🇧',
      'Canada': '🇨🇦',
      'Australia': '🇦🇺',
      'Brazil': '🇧🇷',
      'India': '🇮🇳',
      'Russia': '🇷🇺',
      'Mexico': '🇲🇽',
      'Spain': '🇪🇸',
      'Netherlands': '🇳🇱',
      'Switzerland': '🇨🇭',
      'Sweden': '🇸🇪'
    };
    return Scaffold(
      extendBodyBehindAppBar: true,
      appBar: AppBar(
        backgroundColor: const Color(0x00FFFFFF),
        title: const Text('FOLLOW LIST'),
      ),
      body: Container(
        decoration: const BoxDecoration(
          image: DecorationImage(
            image: AssetImage("images/login_bg.webp"),
            fit: BoxFit.cover,
          ),
        ),
        child: SafeArea(
          child: ListView.separated(itemBuilder: (ctx,idx){
            return Container(
              decoration: const BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.all(Radius.circular(10)),
                border: Border.fromBorderSide(BorderSide(color: ABStyles.darkBlack)),
              ),
              child: ListTile(
                title: Text(ABSingleton.follows[idx].nickname),
                leading: ABCircleAvatar(
                  url: ABSingleton.follows[idx].avatar, size: 50,
                ),
                subtitle: Text(flagDict[ABSingleton.follows[idx].country] ?? ''),
                trailing: IconButton(
                  icon: const Icon(Icons.check_circle, color: ABStyles.lightBlack),
                  onPressed: () async {
                    await api.unfollow(ABSingleton.follows[idx].userId);
                    setState(() {
                      ABSingleton.follows.removeAt(idx);
                    });
                    Get.find<ABVideoHomePageController>().update();
                  },
                )
              ),
            );
          }, separatorBuilder: (ctx,idx){
            return const Divider();
          }, itemCount: ABSingleton.follows.length,padding: const EdgeInsets.symmetric(horizontal: 20)),
        ),
      ),
    );
  }
}
